<template>
  <div class="phonetic-Match">
    <!-- 页面标题 -->
    <div class="page-title">语音匹配</div>

    <!-- 卡片列表容器 -->
    <div class="card-grid">
      <!-- 动态生成卡片 -->
      <div
        v-for="item in userList"
        :key="item.donorId"
        @click="goToDetail(item)"
        class="card"
      >
        <!-- 图片区域 -->
        <div>
          <img
            class="card-image"
            :src="item.photoUrl ? item.photoUrl : deflutImage"
            alt="donor"
            loading="lazy"
          />
        </div>

        <!-- 编号与图标区域 -->
        <div class="card-header">
          <div class="left">
            <span class="donor-id">{{ item.donorId }}</span>
            <!-- 固定图标 -->
            <img
              class="icon"
              referrerpolicy="no-referrer"
              src="/img/ps9dtwpgbaua7m66ivh0f27hwfa63eyj6iiff8c5823.png"
              loading="lazy"
            />
            <!-- 条件图标：仅当 rozenDonation 为真时显示 -->
            <img
              v-if="item.rozenDonation"
              class="icon"
              referrerpolicy="no-referrer"
              src="/img/psijcmo3sgti6l3utq3wx964d33ctervs2152c9896.png"
              loading="lazy"
            />
          </div>

          <div class="right">
            <span class="flag-number">{{ item.flagNumber }}</span>
            <img
              class="flag-icon"
              src="/img/psqzcr9q0kjugojilzr7idrcmlydf7dxjfb85477e7.png"
              loading="lazy"
            />
            <span class="flag-number">{{ item.flagNumber }}</span>
            <img
              class="flag-icon"
              src="/img/psdbnghkpwnbg38ld11t5wbyq2tnajwarun1c00ad19.png"
              loading="lazy"
            />
          </div>
        </div>

        <!-- 分隔线 -->
        <div class="divider"></div>

        <!-- 当前状态展示 -->
        <div
          class="status"
          :class="item.status ? 'status-active' : 'status-inactive'"
        >
          目前状态：{{ item.status }}
        </div>

        <!-- 详细信息区域 -->
        <div class="details">
          <!-- 年龄 -->
          <div class="detail-row">
            <span class="label">年龄</span>
            <span class="value">{{ item.ageAtDonation }}</span>
          </div>
          <!-- 身高 -->
          <div class="detail-row">
            <span class="label">身高</span>
            <span class="value">{{ item.height }}</span>
          </div>
          <!-- 体重 -->
          <div class="detail-row">
            <span class="label">体重</span>
            <span class="value">{{ item.weight }}</span>
          </div>
          <!-- 血型 -->
          <div class="detail-row">
            <span class="label">血型</span>
            <span class="value">{{ item.bloodType }}</span>
          </div>
          <!-- 眼睛颜色 -->
          <div class="detail-row">
            <span class="label">眼睛颜色</span>
            <span class="value">{{ item.eyeColor }}</span>
          </div>
          <!-- 头发颜色 -->
          <div class="detail-row">
            <span class="label">头发颜色</span>
            <span class="value">{{ item.hairColor }}</span>
          </div>
          <!-- 肤色 -->
          <div class="detail-row">
            <span class="label">肤色</span>
            <span class="value">{{ item.skinTone }}</span>
          </div>
          <!-- 最高学历 -->
          <div class="detail-row">
            <span class="label">最高学历</span>
            <span class="value">{{ item.educationLevel }}</span>
          </div>
          <!-- 种族 -->
          <div class="detail-row">
            <span class="label">种族</span>
            <span class="value">{{ item.ethnicity }}</span>
          </div>
          <!-- 捐献身份 -->
          <div class="detail-row">
            <span class="label">开放身份捐献还是匿名？</span>
            <span class="value">{{
              item.anonymous ? "匿名" : "开放身份"
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件（已注释，可按需打开） -->
    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[9, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import { useRouter } from "vue-router";
import { selectCollectObj } from "@/api/business/sperm";
import deflutImage from "/no.png";

/* -------------------- 响应式数据 -------------------- */
const userStore = useUserStore();
const router = useRouter();
const user_id = ref(userStore.id);

// 用户列表
const userList = ref([]);
// 加载状态
const loading = ref(true);
// 总条数
const total = ref(0);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 9, // 与后端约定 3×3 布局
  userId: user_id.value,
});

/* -------------------- 生命周期 -------------------- */
onMounted(() => {
  getList();
});

/* -------------------- 方法 -------------------- */
/**
 * 获取收藏列表
 */
function getList() {
  loading.value = true;
  selectCollectObj(queryParams)
    .then((res) => {
      userList.value = res.data || [];
      total.value = res.total || 0;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 跳转到详情页
 * @param {Object} item - 当前卡片数据
 */
const goToDetail = (item) => {
  router.push({
    path: "/parents/sperm-detail",
    query: {
      id: item.donorId,
      userId: item.userId,
    },
  });
};

/**
 * 分页大小改变时触发
 * @param {Number} val - 新的分页大小
 */
function handleSizeChange(val) {
  queryParams.pageSize = val;
  getList();
}

/**
 * 当前页码改变时触发
 * @param {Number} val - 新的页码
 */
function handleCurrentChange(val) {
  queryParams.pageNum = val;
  getList();
}
</script>

<style lang="scss" scoped>
/* ---------- 页面标题 ---------- */
.page-title {
  font-size: 16px;
  font-weight: bold;
  font-family: "Microsoft YaHei", sans-serif;
  color: #2b5cab;
  line-height: 1.5;
}

/* ---------- 卡片网格：后端驱动，3 列自适应 ---------- */
.card-grid {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 与后端约定的列间距 */
  justify-content: flex-start;
}

/* 每一张卡片：固定三等分 */
.card {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  min-width: 260px;
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 卡片内部样式保持不变 */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;

  .left,
  .right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .donor-id {
    font-size: 24px;
    font-weight: bold;
  }

  .icon {
    width: 24px;
    height: 24px;
  }

  .flag-number {
    font-size: 16px;
    color: #4d4d4d;
  }

  .flag-icon {
    width: 22px;
    height: 16px;
  }
}

.divider {
  height: 1px;
  background-color: #e6e6e6;
}

.status {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  &-active {
    color: #2b5cab;
  }
  &-inactive {
    color: #4d4d4d;
  }
}

.details {
  margin-top: 38px;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;

  .label {
    font-size: 16px;
    color: #4d4d4d;
    line-height: 24px;
  }
  .value {
    font-size: 16px;
    color: #2b5cab;
    line-height: 24px;
    text-align: right;
  }
  &:last-child {
    border-bottom: none;
  }
}

/* ---------- 分页（已注释，按需打开） ---------- */
.pagination {
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
}
</style>
